<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.demoTable{
		height:40px;
		margin-top:15px;
		margin-left:100px;
	}
	.layui-form-label{
		width:28px;
	}
</style>
</head>
<body>
<div class="demoTable layui-form">
	<c:forEach items="${show.forms}" var="field">
		<c:if test="${field.type=='input'}">
			<c:if test="${field.flag == 11||field.flag == 1}">
				 ${field.name}
				  <div class="layui-inline">
				    <input class="layui-input" name="${field.field}" id="${field.field}" autocomplete="off">
				  </div>
			</c:if>
		</c:if>
		<c:if test="${field.type=='select'}">
			<c:if test="${field.flag == 11||field.flag == 1}">
			<div class="layui-inline">
		      <label class="layui-form-label">${field.name}</label>
		      <div class="layui-input-inline">
		        <select id="${field.field}"  name="${field.field}" lay-verify="required" lay-search="">
		        	<c:forEach items="${field.options}" var="option">
		        		<c:if test="${option.type==0}">
			        		<option value="${option.value}">${option.name}</option>
		        		</c:if>
		        	</c:forEach>
		        </select>
		      </div>
		    </div>
			</c:if>
		</c:if>
	</c:forEach>
  <button class="layui-btn" data-type="reload">搜索</button>
  <button class="layui-btn" onclick="$('.layui-body').load('/pro/toPage?id=${id}&flag=0')" >添加</button>
</div>
<table class="layui-hide" lay-data="{id: 'test'}" id="test"></table>
<!-- 按钮 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" onclick="$('.layui-body').load('/pro${show.selurl}?id={{d.id}}&mid=${id}')" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs del" no="{{d.id}}" lay-event="del">删除</a>
</script>
<!-- 状态 -->
<script type="text/html" id="switchTpl">
		<input type="checkbox" no={{d.id}} name="status" value="{{d.status}}" lay-skin="switch" lay-text="上架|下架"  lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script>
	layui.use(['table','form'], function(){
		 var table = layui.table
		 ,form = layui.form;
		 table.render({
		    elem: '#test'
		    ,url:'/pro${show.page}'
		    ,cols: [${show.table}]
		    ,page: true
		  });
		 <c:forEach items="${show.forms}" var="temp">
			 	<c:if test="${temp.options[0].type == 1}">
				 		$.ajax({
						   type: "get",
						   url: "/pro${temp.options[0].name}",
						   async: false,
						   success: function(data){
							   var $temp = $("#${temp.field}");
							   $temp.html("<option value=\"\">全部</option>");
							   $(data).each(function(i,n){
								   $temp.append("<option value="+n.id+">"+n.name+"</option>");
							   })
						   }
						});
			 	</c:if>
		 </c:forEach>
		//监听状态操作
		$(${show.table.fields}).each(function(i,n){
			if(n.extend == 1){
				form.on('switch(status)', function(obj){
				    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
				    var id = obj.elem.attributes['no'].nodeValue;
		            var checked = obj.elem.checked;
		            var flag = 1;
		            if(checked==false){
		                flag = 0;
		            }
		            //发送ajax 请求修改显示状态
		            $.getJSON("/pro"+n.url,{id:id,status:flag},function (data) {
		                if(data){
		                	//表示操作成功
		                }else{
		                	layer.open({
			  					  type: 1, 
			  					  content: '<div style="padding: 20px 100px;">'+ '操作失败' +'</div>' //这里content是一个普通的String
							 });
					    }
					})
				});		
			}
		})
		$('.demoTable .layui-btn').on('click', function(){
			var param = "{";
			$(${show.forms}).each(function(i,n){
				if(n.flag != 10){
					param+="\""+n.field+"\""+":"+"\""+$("#"+n.field).val()+"\",";
				}
			})
			param=param.substring(0,param.length-1);
			param+="}";
			table.reload('test', {
				  where: jQuery.parseJSON(param)
				  ,page: {
				    curr: 1 //重新从第 1 页开始
				  }
				}); 
		});
		form.render();
	});
</script>

<script type="text/javascript">
	$(function(){
		$(".del").click(function(){
			//获取编号
			var $no = $(this).attr("no");
			$.ajax({
	  			   type: "get",
	  			   url: "/pro${show.delurl}",
	  			   async: false,
	  			   data:{id:$no},
	  			   success:function(data){
	  				 	 if(data){
		  					$('.layui-body').load('/pro/toManager?id=${id}');
		  				 }else{
		  					 layer.open({
			  					  type: 1, 
			  					  content: '<div style="padding: 20px 100px;">'+ '操作失败' +'</div>' //这里content是一个普通的String
		  					 });
		  				  }
	  			   }
			})
			
			
		})
	})
</script>

</body>
</html>
</body>
</html>